<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单柱状图</title>
	<script type="text/javascript" src="../js/d3.js"></script>  
	<script type="text/javascript" src="../js/d3.min.js"></script>  

</head>

<body>
	<script type="text/javascript">
	//画布svg  
    var width=400;  
    var height=400;//画布大小  
	
	var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//添加画布
	var padding={left:30,right:30,top:20,bottom:20};//周边留白
	
	var dataset=[10,20,30,40,45,60];//定义数据——改为接收传输的数据
	
	var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,width-padding.left-padding.right]);//x轴比例尺    
	 
	var yScale=d3.scale.linear().domain([0,d3.max(dataset)]).range([height-padding.top-padding.bottom,0]);//y轴比例尺
	
	//x坐标轴  
    var xAxis=d3.svg.axis().scale(xScale).orient("bottom");  
    //y坐标轴  
    var yAxis=d3.svg.axis().scale(yScale).orient("left");  
    
	
	//添加矩形元素  
    var rects=svg.selectAll(".myRect").data(dataset).enter().append("rect").attr("class","myRect").attr("transform","translate("+padding.left+","+padding.top+")")  
    .attr("x",function(d,i){  
        return xScale(i)+2;  
    })  
    .attr("y",function(d,i){  
        return yScale(d);  
    })  
    .attr("width",function(d,i){  
        return xScale.rangeBand()-2;  
    })  
    .attr("height",function(d,i){  
        return height-padding.top-padding.bottom-yScale(d);  
    })
	.attr("fill","steelblue");      
		
	 //添加文字元素  
    var texts=svg.selectAll(".myText").data(dataset).enter().append("text").attr("class","myText").attr("transform","translate("+padding.left+","+padding.top+")")  
    .attr("x",function(d,i){  
        return xScale(i)+2;  
    })  
    .attr("y",function(d,i){  
        return yScale(d);  
    })  
    .attr("width",function(d,i){  
        return (xScale.rangeBand() - 4)/2;  
    })  
    .attr("height",function(d,i){  
        return 20;  
    }).text(function(d){  
        return d;  
    })  
	
  
    //添加坐标轴  
    //1.x  
    svg.append("g").attr("class","axis").attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")  
    .call(xAxis);  
	
    //2.y  
    svg.append("g").attr("class","axis").attr("transform","translate(" + padding.left + "," +padding.top + ")")  
    .call(yAxis);  
	
	
	
	
	
	</script>
</body>
</html>
